<template>
	<div>
		<div>
			<!-- 正在学习 -->
			<h3 class="zzxx">正在学习</h3>
			<el-row :gutter="20" justify="center">
				<el-col :span="4">
					<div class="grid-content bg-purple" @click="this.$router.push('/classinfo')">
						<div class="grid-content bg-purple">
							<div class="picture">图片</div>
							<div class="rwhq">
								<!-- 人物后期 -->
								<p>人物后期</p>
								<p>2021.1.10-2022.4.1</p>
							</div>
						</div>
					</div>
				</el-col>
				<el-col :span="4">
					<div class="grid-content bg-purple">
						<div class="picture">图片</div>
						<div class="rwhq">
							<p>画报制作</p>
							<p>2021.1.10-2022.4.1</p>
						</div>
					</div>
				</el-col>
				<el-col :span="4">
					<div class="grid-content bg-purple">
						<div class="picture">图片</div>
						<div class="rwhq">
							<p>电商广告</p>
							<p>2021.1.10-2022.4.1</p>
						</div>
					</div>
				</el-col>
				<el-col :span="4">
					<div class="grid-content bg-purple">
						<div class="picture">图片</div>
						<div class="rwhq">
							<p>动漫绘画</p>
							<p>2021.1.10-2022.4.1</p>
						</div>
					</div>
				</el-col>
			</el-row>
			<el-row :gutter="20" justify="center">
				<el-col :span="10">
					<div class="grid-content1 bg-purple">
						<!-- 小导航栏 -->
						<div class="xdhl">
							行业趋势（人才需求）
						</div>
						<el-image :src="src" @click="this.$router('')" /><!-- 行业需求二级页面 -->
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content1 bg-purple">
						<!-- 小导航栏 -->
						<div class="xdhl">
							师生互动
						</div>
					</div>
				</el-col>
			</el-row>
			<el-row :gutter="20" justify="center">
				<el-col :span="10">
					<div class="grid-content1 bg-purple">
						<!-- 小导航栏 -->
						<div class="xdhl">
							云计算必备知识 成都招聘
						</div>
						<div>
							<el-table :data="tableData" stripe style="width: 100%" class="essentialknowledge">
								<el-table-column prop="专业知识" label="专业知识" />
								<el-table-column prop="快速入门" label="快速入门"></el-table-column>
								<el-table-column prop="学习资源" label="学习资源" />
								<el-table-column prop="岗位要求" label="岗位要求" />
							</el-table>
						</div>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content1 bg-purple">
						<!-- 小导航栏 -->
						<div class="xdhl">
							学习计划
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
	import {
		toRefs
	} from 'vue'
	export default {
		setup() {
			const src =
				'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg';
			const tableData = [{
					date: '2016-05-03',
					name: 'Tom',
					address: 'No. 189, Grove St, Los Angeles',
				},
				{
					date: '2016-05-02',
					name: 'Tom',
					address: 'No. 189, Grove St, Los Angeles',
				},
				{
					date: '2016-05-04',
					name: 'Tom',
					address: 'No. 189, Grove St, Los Angeles',
				},
				{
					date: '2016-05-01',
					name: 'Tom',
					address: 'No. 189, Grove St, Los Angeles',
				},
			]
			return {
				src,
				tableData
			}

		}
	}
</script>

<style lang="less">
	.xdhl {
		text-align: center;
		line-height: 50px;
		height: 50px;
		background-color: #62d2a2;
		box-shadow: 0px 1px 2px 1px rgb(31, 171, 137);
	}

	.zzxx {
		font-size: 16px;
		font-family: "Microsoft YaHei";
		color: rgb(15, 83, 66);
		margin-left: 16.5%;
	}

	.picture {
		display: inline;
		background-color: aquamarine;
		position: absolute;
		height: 80px;
		width: 5%;
	}

	.el-row {
		margin-bottom: 20px;
		margin-top: 20px;
	}

	.el-row:last-child {
		// margin-bottom: 0;
	}

	.el-col {
		border-radius: 4px;
	}

	.grid-content {
		width: 85%;
		min-height: 80px;
		border-radius: 1px;
		background-color: rgb(215, 251, 232);
		opacity: 0.839;
		box-shadow: 0px 1px 2px 2px rgb(31, 171, 137);
	}

	.grid-content1 {
		width: 90%;
		min-height: 380px;
		border-radius: 1px;
		background-color: rgb(215, 251, 232);
		opacity: 0.839;
		box-shadow: 0px 1px 2px 2px rgb(31, 171, 137);
	}

	.rwhq {
		display: inline;
		font-size: 13px;
		font-family: "Microsoft YaHei";
		color: rgb(15, 83, 66);
		position: absolute;
		height: 80px;
		width: 15%;
	}

	.rwhq p {
		margin-left: 35%;
	}

	.essentialknowledge .has-gutter{
		background-color: #7bd9b1 !important;
		// color: #7bd9b1;
	}
	
	.essentialknowledge .el-table__row{
		background-color: #ddfbeb !important;
		// color: #ddfbeb;
	}
	
	.essentialknowledge .el-table__row .el-table__row--striped{
		background-color: #7bd9b1;
		// color: #7bd9b1;
	}
</style>
